<template>
  <div class="hot-item">
    <div class="item-header">
      <div class="item-name" @click="locationHotItem()">
        {{info.properties.roadName}}({{info.properties.roadStart}}-{{info.properties.roadEnd}})
      </div>
      <div :class="itemtrafficstatus">{{trafficstatus}}</div>
      <div class="clear-both"></div>
    </div>
    <div class="item-body">
      <div class="item-cell">{{averagespeed}}</div>
      <div class="item-cell">{{degreeLen}}</div>
      <div class="item-cell">{{rtic_updatetime}}</div>
      <div class="clear-both"></div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import env from '../../global/env'
  export default{
    name: 'HotItem',
    props: ['info'],
    data(){
      return {
        msg: 'hello vue',
        myFilter: Vue.filter("length-filter"),
        geoJsonData : {
          "type": "FeatureCollection",
          "features": [{
            "type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": []
            },
            "properties":{
              "startTime": "201702180936",
              "duration": "14",
              "jamLength": "0.58",
              "avgspeed": "2",
              "roadEnd": "环城路",
              "JamType": "2",
              "jamStatus": "0",
              "roadStart": "体育场南路",
              "roadName": "铁中路"
            },
          }]
        },


      }
    },

    mounted(){
      console.log("HotItem mounted")
      this.initCongetionRoad_mapLayer()
    },

    computed: {
      itemtrafficstatus: function () {
        return {
          congestion: this.info.properties.JamType === '2',//拥堵
          slow: this.info.properties.JamType === '1',//缓慢
          /*clear: this.info.properties.JamType ===1,//畅通*/
          'items-tatus': true
        }
      },
      trafficstatus(){
        if (this.info.properties.JamType) {
          switch (this.info.properties.JamType) {
            case '1':
              return '常规拥堵'
            case '2':
              return '异常拥堵'
            default:
              return ''
          }
        }
      },
      averagespeed(){
        return this.info.properties.avgspeed + "M/H"
      },
      degreeLen(){
        return this.info.properties.jamLength + "KM"
      },
      rtic_updatetime(){
        let updatetime = this.info.properties.startTime
        return updatetime.substring(8, 10) + ":" + updatetime.substring(10, 12)
      },
      traveltime(){
        return this.info.properties.duration + "分"
      }
    },

    methods: {
      initCongetionRoad_mapLayer(){
        var map = env.map
        if(!map.getSource("congestionRoadPoint_source")){
          map.addSource("congestionRoadPoint_source", {
            "type": "geojson",
            "data": {
              "type": "FeatureCollection",
              "features": []
            }
          });
        }
        if(!map.getLayer("congetionPoints_Layer")){
          map.addLayer({
            "id": 'congetionPoints_Layer',
            "type": "symbol",
            "source": "congestionRoadPoint_source",
            "layout": {
//              "icon-image": "circle-red-11", //外网
              "icon-image": "marker-15", //内网
              "text-field": "{roadName}",
              "text-size" : 14,
              "text-offset": [0, 0.6],
              "text-anchor": "top",
//              "text-rotate": 2,
            },
            "paint": {
              "icon-color": "#ff0000",
              "text-color": "#ff0000",
            },
//            filter: ['in', '$type', 'Point']
          });
        }
      },
      displayCongestionHotspotsRoad(loc){
        var map = env.map
        map.flyTo({center: [loc[0],loc[1]] , /*zoom: 15*/})
        this.initCongetionRoad_mapLayer()
        this.geoJsonData.features[0].geometry.coordinates = loc
        this.geoJsonData.features[0].properties = this.info.properties
        map.getSource("congestionRoadPoint_source").setData(this.geoJsonData)
      },

      locationHotItem(event){
        console.log("-------------")
        console.log(this.info)
        var loc = this.info.geometry.coordinates
        console.log(loc)
        this.displayCongestionHotspotsRoad(loc)
      },

    }

  }
</script>

<style scoped>
  .hot-item {
    font-size: 12px;
    border-bottom: 1px sandybrown solid;
  }

  .clear-both {
    clear: both;
  }

  .item-header {
    padding: 5px 10px;
    font-size: 14px;
  }

  .item-name {
    float: left;
    color: #40c0f5;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
  }

  .items-tatus {
    float: right;
    color: #ff0000;
  }

  .item-body {
    display: table-row;
  }

  .item-cell {
    width: 67px;
    display: table-cell;
    text-align: center;
    height: 20px;
    line-height: 20px;
  }

  .congestion {
    color: #ff3b30;
  }

  .slow {
    color: #ff7200;
  }

  .clear {
    color: green;
  }
</style>
